<template>
    <div class="case">
      <div class="banner container-fuild text-center">案源委托</div>
      <div class="container middle">
        <el-form :inline="true" :model="formInline" class="form-inline">
          <el-form-item class="form-left">
            <el-input v-model="formInline.user" placeholder="请输入债权名称、欠债金额等"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.time" placeholder="时间">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>`
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <div v-for="(it, idx) in caseList" :key="it.id" class="normal-item" :class="{'item-one' : !idx}" @click="viewDetail(it.id)">
          <div class="line-one">
            <span>求助信息的事由:{{it.reason}}</span>
            <span>求助信息的诉讼内容:{{it.content}}</span>
            <span>求助信息的结束标准:{{it.endSign}}</span>
            <span @click="viewDetail(it.id)">查看详情</span>
          </div>
          <div class="line-two line-t">
            <span>求助信息的执行地区:{{it.address}}</span>
            <span>求助信息的代理价格:{{it.money}}</span>
            <span>信息有效时间:{{it.validTime}}</span>
          </div>
          <div class="line-three">
            <span>案源ID:{{it.id}}</span>
            <span>发布时间:{{it.createTime}}</span>
          </div>
        </div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="120">
        </el-pagination>
      </div>
    </div>
</template>
<script>
import { WOW } from 'wowjs';
export default {
    name: 'Case',
    data(){
        return{
          formInline: {
            user: '',
            time: ''
          },
          caseList:[{
            id: '202108',
            reason: '',
            content: '',
            endSign: '',
            validTime: '',
            name: '吴一凡',
            status: '待评估',
            money: '1000',
            createTime: '2021-08-31',
            address: '北京市海淀区中关村大厦'
          },{
            id: '202109',
            reason: '',
            content: '',
            endSign: '',
            validTime: '',
            name: '吴凡',
            status: '待评估',
            money: '2000',
            createTime: '2021-09-01',
            address: '北京市海淀区中关村大厦'
          },{
            id: '202101',
            reason: '',
            content: '',
            endSign: '',
            validTime: '',
            name: '吴一',
            status: '待评估',
            money: '2200',
            createTime: '2021-09-02',
            address: '北京市海淀区中关村大厦'
          },{
            id: '202111',
            reason: '',
            content: '',
            endSign: '',
            validTime: '',
            name: '吴一',
            status: '待评估',
            money: '2200',
            createTime: '2021-09-02',
            address: '北京市海淀区中关村大厦'
          },{
            id: '202121',
            reason: '',
            content: '',
            endSign: '',
            validTime: '',
            name: '吴一',
            status: '待评估',
            money: '2200',
            createTime: '2021-09-02',
            address: '北京市海淀区中关村大厦'
          },{
            id: '202131',
            reason: '',
            content: '',
            endSign: '',
            validTime: '',
            name: '吴一',
            status: '待评估',
            money: '2200',
            createTime: '2021-09-02',
            address: '北京市海淀区中关村大厦'
          },{
            id: '202141',
            reason: '',
            content: '',
            endSign: '',
            validTime: '',
            name: '吴一',
            status: '待评估',
            money: '2200',
            createTime: '2021-09-02',
            address: '北京市海淀区中关村大厦'
          },{
            id: '202151',
            reason: '',
            content: '',
            endSign: '',
            validTime: '',
            name: '吴一',
            status: '待评估',
            money: '2200',
            createTime: '2021-09-02',
            address: '北京市海淀区中关村大厦'
          }],
        }
    },
    mounted(){
        var wow = new WOW();
        console.log(wow)
        wow.init();

       
    },
    methods: {
      onSubmit(){
        this.getDataList()
      },
      viewDetail(id) {
        this.$router.push({path: `caseDetail/${id}`})
      },
      getDataList(){
         this.$util.post('/api/entrustment/getEntrustmentList',{}).then(res=>{
          console.log(res)
        })
      }
    }
}
</script>
<style>
.form-left .el-form-item__content {
  width: 100%;
}
</style>
<style scoped>

.banner {
  color: #fff;
  font-size: 30px;
  height: 300px;
  line-height: 150px;
  background-image: url("../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.middle {
  margin: 40px auto;
}
.middle .el-form {
  display: flex;
  justify-content: space-between;
}
.form-left {
  flex: 1;
}
.middle .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.middle .title .line {
  content: '-';
  width: calc(100% - 160px);
  height: 1px;
  background: #ccc;
}
.normal-item {
  border: 2px solid #CADEF5;
  border-radius: 4px;
  padding: 20px 10px;
  margin-top: 30px;
}
.item-one {
  color: #fff;
  background: #3B8FEE;
}
.line-one {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #CADEF5;
  padding-bottom: 20px;
}
.line-two {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
}
.line-t {
  padding-bottom: 20px;
}
.line-three {
  border-top: 1px solid #CADEF5;
  padding-top: 20px;
}
.el-pagination {
  text-align: center;
  margin-top: 40px;
}
@media screen and (max-width: 767px){
    .news-container>li{
        width: 100%;
    }
    .news-container>li>.content{
        width: 70%;
        text-align: left;
        float: right;
    }
    .news-container>li>.time{
        width: 30%;
        text-align: left;
        float: right;
    }
    .news-container>li>.circle{
        display: none;
    }
}
</style>

